<example name="List">
  <file type="html">
    <div id='list'></div>
  </file>

  <file type="js">
    import {render} from 'react-dom';
    import List from '@jetbrains/ring-ui/components/list/list';

    var listData = [];
    for (var i = 0; i < 1000; i++) {
      listData.push({
        'label': 'Item ' + i,
        'rgItemType': List.ListProps.Type.ITEM
      });
    }

    render(List.factory({
      maxHeight: 400,
      data: listData,
      shortcuts: true,
      onSelect: console.log.bind(console)
    }), document.getElementById('list'));
  </file>
</example>

<example name="List with a hint below">
  <file type="html">
    <div id='list'></div>
  </file>

  <file type="js">
    import {render} from 'react-dom';
    import List from '@jetbrains/ring-ui/components/list/list';

    var listData = [
      {'label': 'One', 'rgItemType': List.ListProps.Type.ITEM},
      {'label': 'Two', 'rgItemType': List.ListProps.Type.ITEM},
      {'label': 'Active as default', 'rgItemType': List.ListProps.Type.ITEM},
      {'label': 'Four', 'rgItemType': List.ListProps.Type.ITEM},
      {
        'label': 'Five (disabled)',
        'rgItemType': List.ListProps.Type.ITEM,
        disabled: true
      }
    ];

    render(List.factory({
      data: listData,
      shortcuts: true,
      onSelect: console.log.bind(console),
      activeIndex: 2,
      hint: 'Hint about the list'
    }), document.getElementById('list'));
  </file>
</example>

<example name="List #2">
  <file type="html">
    <div id='list'></div>
  </file>

  <file type="js">
    import {render} from 'react-dom';
    import List from '@jetbrains/ring-ui/components/list/list';

    var listData = [
      {'label': 'One', 'rgItemType': List.ListProps.Type.ITEM},
      {'label': 'Two', 'rgItemType': List.ListProps.Type.ITEM},
      {'label': 'Active as default', 'rgItemType': List.ListProps.Type.ITEM},
      {'label': 'Four', 'rgItemType': List.ListProps.Type.ITEM},
      {'label': 'Five', 'rgItemType': List.ListProps.Type.ITEM}
    ];

    render(List.factory({
      data: listData,
      activeIndex: 2,
      shortcuts: true,
      onSelect: console.log.bind(console),
    }), document.getElementById('list'));
  </file>
</example>

<example name="List #3">
  <file type="html">
    <div id='list'></div>
  </file>

  <file type="js">
    import {render} from 'react-dom';
    import List from '@jetbrains/ring-ui/components/list/list';

    var listData = [
      {
        'rgItemType': List.ListProps.Type.SEPARATOR,
        'description': 'First separator'
      },
      {'label': 'Item 1', 'rgItemType': List.ListProps.Type.ITEM},
      {
        'rgItemType': List.ListProps.Type.SEPARATOR,
        'description': 'Second sep'
      },
      {'label': 'Item 2', 'rgItemType': List.ListProps.Type.ITEM},
      {
        'rgItemType': List.ListProps.Type.TITLE,
        'label': 'Group title',
        'description': 'With description'
      },
      {
        'label': 'Item 3',
        'rgItemType': List.ListProps.Type.ITEM,
        'description': 'Foo bar'
      },
      {
        'label': 'Item 4',
        'rgItemType': List.ListProps.Type.ITEM,
        'description': 'Item description'
      },
      {
        'label': 'Item 5',
        'rgItemType': List.ListProps.Type.ITEM,
        'description': 'Item description',
        details: 'Additional details line'
      },
      {
        'label': 'Item 6',
        'rgItemType': List.ListProps.Type.ITEM,
        'description': 'Item description',
        details: 'Additional details line, a long long text. And once again, additional details line, a long long text. And once again, additional details line, a long long text. And once again, additional details line, a long long text. And once again, additional details line, a long long text.'
      },
    ];

    render(List.factory({
      data: listData,
      shortcuts: true,
      onSelect: console.log.bind(console)
    }), document.getElementById('list'));
  </file>
</example>

<example name="List with item icons">
  <file type="html">
    <div id='list' style="width: 300px;"></div>
  </file>

  <file type="js">
    import {render} from 'react-dom';
    import List from '@jetbrains/ring-ui/components/list/list';
    import warningIcon from '@jetbrains/icons/warning.svg';

    var listData = [
      {
        label: 'Some item',
        description: 'Long long long long long long long long long long long long long long long description',
        key: '1',
        'rgItemType': List.ListProps.Type.ITEM,
        glyph: warningIcon,
        rightGlyph: warningIcon
      },
      {
        label: 'Some item with a long long label, much longer than description',
        key: '2',
        'rgItemType': List.ListProps.Type.ITEM,
        description: 'Test item',
        icon: 'http://icons.iconarchive.com/icons/osiris/world-flags/16/00-cctld-ac-icon.png'
      },
      {
        label: 'Some item with a long long label',
        key: '3',
        'rgItemType': List.ListProps.Type.ITEM,
        description: 'Long long long long long long long long long long long long long long long description',
        checkbox: true
      },
      //Link doesn't support icons
      {
        label: 'Some item',
        key: '4',
        'rgItemType': List.ListProps.Type.LINK,
        description: 'Test item',
        icon: 'http://www.thg.ru/forum/images/icons/icon6.gif'
      },
      {
        label: 'Some item',
        key: '5',
        href: 'http://localhost:9999',
        description: 'Test item',
        icon: 'http://www.thg.ru/forum/images/icons/icon6.gif'
      }
    ];

    render(List.factory({
      data: listData,
      shortcuts: true,
      onSelect: console.log.bind(console)
    }), document.getElementById('list'));
  </file>
</example>

<example name="List should support the deprecated item.type parameter">
  <file type="html">
    <div id='list'></div>
  </file>

  <file type="js">
    import {render} from 'react-dom';
    import List from '@jetbrains/ring-ui/components/list/list';

    var listData = [
      {'label': 'One', 'type': List.ListProps.Type.ITEM},
      {'label': 'Two', 'type': List.ListProps.Type.ITEM},
      {'label': 'Three', 'type': List.ListProps.Type.ITEM},
      {'label': 'Four', 'type': List.ListProps.Type.ITEM},
      {'label': 'Five', 'type': List.ListProps.Type.ITEM}
    ];

    render(List.factory({
      data: listData,
      shortcuts: true,
      onSelect: console.log.bind(console)
    }), document.getElementById('list'));
  </file>
</example>

<example name="List with custom items">
  <file type="html">
    <div id='list'></div>
  </file>
  <file type="js">
    import {render} from 'react-dom';
    import List from '@jetbrains/ring-ui/components/list/list';
    import React from 'react';

    var listData = [
      {
        key: '1',
        rgItemType: List.ListProps.Type.CUSTOM,
        template: React.createElement('span', {}, 'custom item')
      },
      {
        key: '2',
        rgItemType: List.ListProps.Type.CUSTOM,
        template: React.createElement('span', {}, 'custom item (disabled)'),
        disabled: true
      },
      {
        key: '3',
        rgItemType: List.ListProps.Type.CUSTOM,
        template: React.createElement('span', {}, 'custom item 3')
      },
    ];

    render(List.factory({
      data: listData,
      shortcuts: true,
      onSelect: console.log.bind(console)
    }), document.getElementById('list'));
  </file>
</example>
